<template>
<div>
  <el-dialog title="设置" :visible.sync="setDialog" width="900px" append-to-body>
    <el-container style="height: 400px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: #f9f9f92e">
          <el-menu
            default-active="1"
            @open="handleOpen"
            @close="handleClose">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">主题设置</span>
            </el-menu-item>
            <el-menu-item index="2" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">其他</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
           <el-row :gutter="10" >
            <el-col :span="12">
              <span><el-radio v-model="themeType" label="0" @input="themeRadio">默认</el-radio></span>
              <el-image style="width: 280px;height:120px;" :src="require('@/assets/image/theme/theme0.png')"></el-image>
            </el-col>
            <el-col :span="12">
              <span><el-radio v-model="themeType" label="1" @input="themeRadio">主题1</el-radio></span>
              <el-image style="width: 280px;height:120px;" :src="require('@/assets/image/theme/theme1.png')"></el-image>
            </el-col>
           </el-row>
           <el-row :gutter="10" style="margin-top:20px">
            <el-col :span="12">
              <span><el-radio v-model="themeType" label="2" @input="themeRadio">主题2</el-radio></span>
              <el-image style="width: 280px;height:120px;" :src="require('@/assets/image/theme/theme2.png')"></el-image>
            </el-col>
            <el-col :span="12">
              <span><el-radio v-model="themeType" label="3" @input="themeRadio">主题3</el-radio></span>
              <el-image style="width: 280px;height:120px;" :src="require('@/assets/image/theme/theme3.png')"></el-image>
            </el-col>
           </el-row>
           <el-row :gutter="10" style="margin-top:20px">
            <el-col :span="24">
              <el-button type="primary" @click="customThemeOpen">自定义</el-button>
            </el-col>
           </el-row>
          </el-main>
        </el-container>
    </el-container>
  </el-dialog>

  <el-dialog title="自定义主题" :visible.sync="customDialog" width="400px" append-to-body>
    <el-form ref="form" :model="themeForm" label-width="80px">
      <el-form-item label="背景颜色">
        <el-color-picker v-model="themeForm.background"></el-color-picker>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker v-model="themeForm.foreground"></el-color-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="customThemeSave">保 存</el-button>
      </div>
  </el-dialog>
</div>
</template>

<script>
import * as apis from '@/api/sys'
export default {
  data() {
    return {
      themeForm:{},
      customDialog:false,
      themeType:'0',
      setDialog:false,
    }
  },
  methods: {
    // 初始化
    init(data) {
      this.setDialog = true
      apis.getTheme({}).then(res => {
          if(res.data!=null){
            this.themeType=res.data.themeType
            this.themeForm.background=res.data.background
            this.themeForm.foreground=res.data.foreground
          }

        }).finally(() => {})
    },
    customThemeOpen(){
      this.customDialog=true
    },
    customThemeSave(){
      apis.addTheme(this.themeForm).then(res => {
        this.customDialog=false
        
          this.$message({
            type: 'success',
            message: '设置成功!'
          })
          
        }).finally(() => {
        })
    },
    themeRadio(){
      this.themeForm={}
      if(this.themeType=="1"){
        this.themeForm.themeType="1"
        this.themeForm.background="#FFFFFF"
        this.themeForm.foreground="#000000"
      }else if(this.themeType=="2"){
        this.themeForm.themeType="2"
        this.themeForm.background="#000000"
        this.themeForm.foreground="#F1F904"
      }else if(this.themeType=="3"){
        this.themeForm.themeType="3"
        this.themeForm.background="#000000"
        this.themeForm.foreground="#0AF007"
      }
      this.customThemeSave()
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
    
  }
}
</script>

<style lang="scss" scoped>

</style>
